<template>
  <view>
    <van-nav-bar
      :border="false"
      custom-class="myNavbar"
      :safeAreaInsetTop="false"
      title="添加"
      style="font-size: 30rpx"
      left-text="返回"
      right-text="确定"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />

    <van-collapse accordion :value="activeName" @change="onChangeCollapse">
      <van-collapse-item title="类型" name="1" :value="type">
        <van-picker :columns="columns" @change="onChangePicker" />
      </van-collapse-item>

      <van-collapse-item title="日期" name="2" :value="dateForShow">
        <van-datetime-picker
          :show-toolbar="false"
          :value="currentDate"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
          @input="onInputDate"
        />
      </van-collapse-item>
    </van-collapse>

    <van-field
      label="金额"
      :value="money"
      input-align="right"
      @input="showMoney"
    />
    <van-field
      label="备注"
      :value="comment"
      input-align="right"
      @input="showComment"
    />
  </view>
</template>

<script>
const types = {
  收入: ['工资', '生活费', '兼职', '其它'],
  支出: ['购物', '娱乐', '交通', '餐饮', '其它'],
};
export default {
  data() {
    return {
      activeName: '',
      minDate: new Date(2010, 1, 1).getTime(),
      maxDate: new Date(2050, 1, 1).getTime(),
      currentDate: new Date().getTime(),
      type: '其它',
      inout: true,
      money: '',
      comment: '',
      date: new Date(),
      dateForShow: '',

      columns: [
        {
          values: Object.keys(types),
          className: 'column1',
        },
        {
          values: types['收入'],
          className: 'column2',
          defaultIndex: 2,
        },
      ],
    };
  },

  methods: {
    onClickLeft() {
      console.log('返回主界面');
      this.$emit('back');
    },
    showDate() {
      var year = this.date.getFullYear();
      var month = this.date.getMonth() + 1;
      var day = this.date.getDate();
      this.dateForShow = year + '-' + month + '-' + day;
    },
    async onClickRight() {
      uni.showToast({
        title: '添加成功',
        duration: 2000,
      });
      console.log(this.money);
      console.log(this.comment);
      console.log(this.type);
      console.log(this.date);
      console.log(this.inout);
      const res = await this.lynRequest.run('insertAccount', {
        a_type: this.type,
        a_inout: this.inout,
        a_money: this.money,
        a_comment: this.comment,
        a_date: this.date.toString(),
      });
      console.log(res);
    },
    showMoney(event) {
      this.money = event.detail;
    },
    showComment(event) {
      this.comment = event.detail;
    },

    onChangeCollapse(event) {
      this.activeName = event.detail;
      console.log(event);
    },

    onInputDate(event) {
      this.currentDate = event.detail;
      console.log(event);
      this.date = new Date(event.detail);
      this.showDate();
      console.log(this.date);
    },

    onChangePicker(event) {
      console.log(event);
      const { picker, value, index } = event.detail;
      picker.setColumnValues(1, types[value[0]]);
      console.log(types);
      console.log(value);

      var inout = value[0];
      if (inout == '收入') this.inout = false;
      else this.inout = true;
      console.log(this.inout);
      this.type = value[1];
      // this.inout=
    },
  },
  created() {
    console.log('页面创建了');
    this.showDate();
  },
};
</script>
<style>
.myNavbar {
  /* background-color: #ffc0cb !important; */
}
</style>
<style scoped></style>
